import React, {createRef} from "react"
import {collectionList} from '../../http/api'
import ContentView from "../../components/ContentView"
import ScrollContent from "../../components/ScrollContent"
import ToggleNavGroup from "../../components/ToggleNavGroup"
import ListItem from '../../components/ListItem'
const {BuyItem,SupplyItem,ListEmpty} = ListItem
export default class RatingList extends React.Component{
        constructor (props) {
                super (props);
                this.state={
                        productType:0,
                        loadingStatus:false
                }
                this.offset=10
                this.dataSource = []
                this.scrollRef = createRef()
        }
        componentWillMount () {
                this.getDataSource()
        }
        getDataSource=()=>{
                const {productType,loadingStatus} = this.state
                if (loadingStatus) {
                        return
                }
                collectionList({productType:productType+1,offset:this.offset,rows:10}).then(res=>{
                        const {list,count} = res
                        this.dataSource = [...this.dataSource,...list]
                        let loadingStatus = this.dataSource.length === count
                        this.setState({loadingStatus})
                        if (this.scrollRef.current) {
                                this.scrollRef.current.finishUpload()
                        }
                })
        }
        handleToggleNavChange = productType =>{
                this.dataSource = []
                this.offset=10
                this.setState({productType,loadingStatus:false},this.getDataSource)
                if (this.scrollRef.current) {
                        this.scrollRef.current.finishUpload()
                }
        }
        //上拉加载
        handleOnPullUp=()=>{
                this.offset = this .offset +10
                this.getDataSource()
        }
        render () {
                const {productType,} = this.state
                const renderItems = [
                        this.dataSource.map((item,index)=><SupplyItem dataSource={item} key={index}/>),
                        this.dataSource.map((item,index)=><BuyItem dataSource={item} key={index}/>)
                ][productType]
                return <ContentView title='我的收藏'>
                        <ScrollContent
                                ref={this.scrollRef}
                                loading={true}
                                loadingStatus={true}
                                onUpload={this.handleOnPullUp}
                        >
                                <ToggleNavGroup onClick={this.handleToggleNavChange}/>
                                <div className='items-content' style={{background:'#ffffff', padding:'0 16px',marginTop:16}}>
                                        {renderItems?.length?renderItems:<ListEmpty/>}
                                </div>
                        </ScrollContent>
                </ContentView>
        }

}
